import React from 'react'

const ASMR: React.FC = () => {
  const categories = [
    'All',
    'Whispers',
    'Ear Attention',
    'Hypnosis',
    'Soft Spoken',
    'Sleep Aid',
    'Role Play',
  ]

  const featuredASMR = [
    {
      id: '1',
      title: 'Intimate Whispers & Ear Attention',
      image: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      creator: 'Emma_ASMR',
      avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      duration: '18:32',
      listeners: '68.3k listeners',
      isPremium: true,
    },
    {
      id: '2',
      title: 'Gentle Hypnosis for Relaxation',
      image: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      creator: 'Lisa_ASMR',
      avatar: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      duration: '24:45',
      listeners: '42.1k listeners',
      isPremium: false,
    },
    {
      id: '3',
      title: 'Close-Up Ear Attention & Licking',
      image: 'https://images.unsplash.com/photo-1503185912284-5271ff81b9a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      creator: 'Sophie_ASMR',
      avatar: 'https://images.unsplash.com/photo-1503185912284-5271ff81b9a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      duration: '32:17',
      listeners: '94.7k listeners',
      isPremium: true,
    },
  ]

  const recommendedASMR = [
    {
      id: '1',
      title: 'Soft Spoken Roleplay',
      image: 'https://images.unsplash.com/photo-1581044777550-4cfa60707c03?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXNpYW4lMjBnaXJsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60',
      creator: 'Mia_ASMR',
      duration: '12:45',
    },
    {
      id: '2',
      title: 'Sleep Inducing Whispers',
      image: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      creator: 'Lisa_ASMR',
      duration: '20:18',
    },
    {
      id: '3',
      title: 'Personal Attention ASMR',
      image: 'https://images.unsplash.com/photo-1503185912284-5271ff81b9a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      creator: 'Sophie_ASMR',
      duration: '15:36',
    },
    {
      id: '4',
      title: 'Ear Massage & Relaxation',
      image: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Z2lybHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60',
      creator: 'Emma_ASMR',
      duration: '28:52',
    },
  ]

  return (
    <div className="min-h-screen bg-app-dark text-white pb-20">
      {/* App Header */}
      <div className="px-4 pt-2 pb-3 flex items-center">
        <div className="text-xl font-bold">ASMR Experience</div>
        <div className="ml-auto flex space-x-4">
          <i className="fas fa-search text-xl"></i>
          <i className="fas fa-sliders-h text-xl"></i>
        </div>
      </div>

      {/* Categories Pills */}
      <div className="px-4">
        <div className="flex overflow-x-auto space-x-2 py-2">
          {categories.map((category, index) => (
            <div
              key={index}
              className={`flex-shrink-0 px-4 py-2 rounded-full text-sm ${
                index === 0 ? 'bg-pink-600 text-white' : 'bg-gray-800 text-white'
              }`}
            >
              {category}
            </div>
          ))}
        </div>
      </div>

      {/* Featured ASMR */}
      <div className="px-4 py-3">
        <h3 className="font-bold mb-3">Featured ASMR</h3>
        {featuredASMR.map((asmr) => (
          <div key={asmr.id} className="bg-card-dark rounded-xl overflow-hidden mb-4">
            <div className="relative h-48">
              <img
                src={asmr.image}
                alt={asmr.title}
                className="w-full h-full object-cover"
              />
              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                <div className="w-14 h-14 bg-pink-600/90 rounded-full flex items-center justify-center">
                  <i className="fas fa-play text-white text-xl"></i>
                </div>
              </div>
              <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded">
                {asmr.duration}
              </div>
              {asmr.isPremium && (
                <div className="absolute top-2 right-2 bg-pink-600 text-white text-xs font-bold px-2 py-1 rounded-full">
                  <i className="fas fa-crown mr-1"></i> Premium
                </div>
              )}
            </div>
            <div className="p-3">
              <div className="flex justify-between items-center mb-2">
                <h4 className="font-semibold">{asmr.title}</h4>
                <div className="flex space-x-1">
                  <div className="w-1 h-4 bg-pink-600 rounded-full animate-pulse"></div>
                  <div className="w-1 h-6 bg-pink-600 rounded-full animate-pulse"></div>
                  <div className="w-1 h-4 bg-pink-600 rounded-full animate-pulse"></div>
                  <div className="w-1 h-6 bg-pink-600 rounded-full animate-pulse"></div>
                  <div className="w-1 h-4 bg-pink-600 rounded-full animate-pulse"></div>
                </div>
              </div>
              <div className="flex justify-between items-center">
                <div className="flex items-center">
                  <img
                    src={asmr.avatar}
                    alt={asmr.creator}
                    className="w-8 h-8 rounded-full mr-2"
                  />
                  <div>
                    <div className="text-sm">{asmr.creator}</div>
                    <div className="text-xs text-gray-400">{asmr.listeners}</div>
                  </div>
                </div>
                <button className="bg-gray-800 text-white rounded-full w-9 h-9 flex items-center justify-center">
                  <i className="fas fa-headphones"></i>
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Now Playing */}
      <div className="px-4 py-3">
        <h3 className="font-bold mb-3">Now Playing</h3>
        <div className="bg-gray-800 rounded-xl p-3">
          <div className="flex items-center">
            <img
              src={featuredASMR[0].image}
              alt={featuredASMR[0].title}
              className="w-14 h-14 rounded-lg object-cover mr-3"
            />
            <div className="flex-1">
              <h4 className="font-semibold text-sm">{featuredASMR[0].title}</h4>
              <p className="text-xs text-gray-400">{featuredASMR[0].creator}</p>
              <div className="mt-1 bg-gray-700 h-1 rounded-full overflow-hidden">
                <div className="bg-pink-500 h-full rounded-full" style={{ width: '35%' }}></div>
              </div>
              <div className="flex justify-between text-xs mt-1">
                <span>6:32</span>
                <span>{featuredASMR[0].duration}</span>
              </div>
            </div>
            <div className="ml-3">
              <button className="bg-pink-600 text-white rounded-full w-10 h-10 flex items-center justify-center">
                <i className="fas fa-pause"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Recommended for You */}
      <div className="px-4 py-3 mb-20">
        <h3 className="font-bold mb-3">Recommended for You</h3>
        <div className="grid grid-cols-2 gap-3">
          {recommendedASMR.map((asmr) => (
            <div key={asmr.id} className="bg-gray-800 rounded-lg overflow-hidden">
              <div className="relative h-24">
                <img
                  src={asmr.image}
                  alt={asmr.title}
                  className="w-full h-full object-cover"
                />
                <div className="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded">
                  {asmr.duration}
                </div>
              </div>
              <div className="p-2">
                <p className="text-xs font-semibold truncate">{asmr.title}</p>
                <p className="text-xs text-gray-400">{asmr.creator}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default ASMR 